<template>
<div class="commission-box">
  <nav-bar title="佣金明细" fixed="fixed"/>
  <div class="commission_list">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="_list_box" :class="{none: CommissionRecord.length===0}">
        <van-list
          v-model="loading"
          :finished="finished"
          :offset="50"
          :immediate-check="false"
          finished-text="暂无数据"
          @load="onLoad"
        >
        <template v-for="(item,index) in CommissionRecord" >
          <div class="list bd-b" :key="index">
            <div class="p">
              <span class="name">{{item.remark}}</span>
              <span class="time">{{item.create_time}}</span>
            </div>
            <span class="amount" :class="{red: item.bonus_amount<0}">{{item.bonus_amount}}</span>
          </div>
        </template>
        </van-list>
      </div>
    </van-pull-refresh>
  </div>
</div>
</template>
<script>
export default {
  name: 'commission',
  data() {
    return {
      isLoading: false,
      loading: false,
      finished: false,
      pages: {
        page: 1,
        limit: 10
      },
      CommissionRecord: []
    };
  },
  created() {
    this.getCommissionRecord();
  },
  mounted() {
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.pages.page = 1;
        this.getCommissionRecord();
        this.isLoading = false;
        this.loading = false;
        this.finished = false;
      }, 500);
    },
    onLoad() {
      this.pages.page++;
      // 异步更新数据
      setTimeout(() => {
        this.getCommissionRecord();
      }, 500);
    },
    getCommissionRecord() {
      this.$API.user.getCommissionRecord(this.pages).then(res => {
        if (!res.code) {
          this.CommissionRecord = this.CommissionRecord.concat(res.data);
          // this.pages.page++;
          // 加载状态结束
          this.loading = false;
          if (this.CommissionRecord.length === res.count) {
            this.finished = true;
          }
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.commission_list{
  height: calc(100% - 88px);
  ._list_box{
    background-color: #fff;
    padding:  0 22px;
  }
  ._list_box.none{
    padding-top: 20px;
    background:none;
  }
  .van-pull-refresh{
    min-height: 100%;
  }
  .list{
    display: flex;
    padding: 32px 0;
    justify-content: space-between;
    .p{
      .name{
        font-size: 32px;
        color: #333;
        display: block;
      }
      .time{
        font-size: 28px;
        color: #999;
      }
    }
    .amount{
      font-size: 30px;
      color: #22C11A
    }
    .amount.red{
      color:#E31D1A
    }
  }
}
</style>
